<!-- 交易详情 -->
<template>
  <div class="trade-info-page" v-if="propertyInfo">
    <el-row type="flex" justify="center">
      <el-col class="middle-content">
        <div style="height:140px"></div>
        <!-- 面包屑导航 -->
        <el-row class="breadcrumb-nav" type="flex" align="middle">
          <div class="current-place">当前位置：</div>
          <el-breadcrumb separator="/">
            <el-breadcrumb-item :to="{ path: '/propsTrade' }">资产交易</el-breadcrumb-item>
            <el-breadcrumb-item>交易详情</el-breadcrumb-item>
          </el-breadcrumb>
        </el-row>
        <!-- 内容区 -->
        <el-row class="main-content">
          <!-- 商品基本信息展示 -->
          <el-row class="goods-show" type="flex">
            <!-- 图片展示 -->
            <GoodsShowBanner :imgList="propertyInfo.imgList" />
            <!-- 商品基本信息 -->
            <div class="goods-text">
              <div class="title">
                {{propertyInfo.propertyName}}
                <span>{{propertyType[propertyInfo.type]}}</span>
              </div>
              <div class="time">
                距报名截止：
                <countDown :endTime="propertyInfo.enrollEndTime" @timeEnd="timeEnd" />
              </div>
              <div class="status">{{propsState[propertyInfo.state]}}</div>
              <div class="price">
                <div>
                  挂牌价
                  <span class="red">￥{{propertyInfo.listingPrice}}</span>万元
                </div>
                <div>保证金：{{propertyInfo.earnestMoney}}万元</div>
              </div>
              <div class="tip" v-if="!isLogin">
                提醒：报名请
                <span @click="herfto('login')">登录</span>
              </div>
              <div
                class="btn btn2"
                :class="propertyInfo.state==6?'btn1':'btn2'"
                @click="herfto('propsTrade/tradeenroll')"
              >{{propertyInfo.state==6?(propertyInfo.auctionState?'已报名':'项目报名'):'报名结束'}}</div>
            </div>
            <!-- 收藏 -->
            <div class="collection" @click="propertyCollectionChange">
              <img
                src="../../assets/img/collection_0.png"
                v-show="propertyInfo.isCollection == 1"
                alt
              />
              <img
                src="../../assets/img/collection_1.png"
                v-show="propertyInfo.isCollection == 0"
              />
              <span>收藏</span>
            </div>
          </el-row>
          <!-- 富文本 -->
          <el-row class="goods-info">
            <el-tabs type="border-card">
              <el-tab-pane label="挂牌信息">
                <p v-html="propertyInfo.propertyDetail"></p>
              </el-tab-pane>
            </el-tabs>
          </el-row>
        </el-row>
      </el-col>
    </el-row>
  </div>
</template>


<script>
import {getPropertyInfo, propertyCollection} from '../../api/propsTrade'
import {setStore} from '@/utils/store'
import {propsState, propsType} from '@/utils/setting'
import store from '@/store'

import GoodsShowBanner from './GoodsShowBanner'
import CountDown from '../../components/common/CountDown'

let propertyType = ['全部', '应收账款', '不良资产', '信贷资产', '非信贷资产']

export default {
  name: 'tradeInfo',
  components: {
    GoodsShowBanner,
    CountDown
  },
  props: {},
  data() {
    return {
      isLogin: '',
      id: '',
      propertyInfo: null,
      propertyType: propsType,
      propsState
    }
  },
  computed: {},
  watch: {},
  methods: {
    // 收藏添加删除
    propertyCollectionChange() {
      propertyCollection(this.id).then(res => {
        let {
          status,
          data: {code, success, message}
        } = res
        if (status == 200 && success) {
          this.$message.success(message)
          this.propertyInfo.isCollection = !this.propertyInfo.isCollection
        } else {
          this.$message.error(message)
        }
      })
    },
    timeEnd() {
      const _this = this
      _this.propertyInfo.state = 8
      _this.$message.error('报名活动已结束')
    },

    // getPropertyInfo
    getInfo(id) {
      const _this = this
      getPropertyInfo(id).then(res => {
        let {
          status,
          data: {code, success, message, result}
        } = res
        if (status === 200 && code === 200 && success) {
          _this.propertyInfo = null
          _this.propertyInfo = Object.assign({}, result)
        } else {
          _this.$message.error(message)
        }
      })
    },
    herfto(name) {
      if (name === 'login') {
        this.$router.push({
          path: `/${name}`,
          query: {
            redirect: this.$route.path,
            id: this.id
          }
        })
      } else {
        setStore({name: 'PROPERTY_INFO', content: Object.assign({}, this.propertyInfo, {id: this.id})})
        this.$router.push(`/${name}`)
      }
    }
  },
  created() {
    this.isLogin = store.getters.getToken
    this.id = this.$route.query.id
    this.getInfo(this.id)
  },
  mounted() {}
}
</script>


<style lang='less' scoped>
.btn2 {
  background: #ccc;
}
.btn1 {
  background: #fbab0b;
}

.main-content {
  .goods-show {
    padding: 30px 30px 48px 50px;
    .goods-text {
      width: 500px;
      margin-left: 50px;
      margin-right: 4px;
      .title {
        font-size: 18px;
        color: #333333;
        line-height: 24px;
        padding-bottom: 28px;
        span {
          display: inline-block;
          width: 60px;
          height: 20px;
          background: #ffffff;
          border: 1px solid #163da0;
          border-radius: 4px;

          font-size: 12px;
          color: #3a5bae;
          line-height: 20px;
          text-align: center;
        }
      }
      .time {
        font-size: 14px;
        color: #666666;
        line-height: 14px;
        span {
          color: #aa0000;
        }
        padding-bottom: 28px;
      }
      .status {
        font-size: 14px;
        color: #fbac0c;
        line-height: 14px;
        padding-bottom: 10px;
      }
      .price {
        height: 75px;
        background-color: #fafafa;
        display: flex;
        align-items: center;

        font-size: 14px;
        color: #333333;
        line-height: 14px;

        .red {
          font-size: 24px;
          color: #ca0000;
          font-weight: bold;
        }
        > div:first-child {
          margin-right: 80px;
          margin-left: 20px;
        }
      }
      .tip {
        margin-top: 20px;
        font-size: 12px;
        color: #333333;
        line-height: 12px;
        span {
          color: #aa0000;
        }
      }
      .btn {
        margin-top: 50px;
        width: 220px;
        height: 60px;
        border-radius: 4px;

        font-size: 24px;
        color: #ffffff;
        line-height: 60px;
        text-align: center;
      }
    }
    .collection {
      display: flex;
      flex-direction: column;
      align-items: center;

      font-size: 14px;
      color: #666666;
      line-height: 14px;

      img {
        width: 20px;
        height: 20px;
        margin-bottom: 7px;
      }
    }
  }

  > .el-row {
    background-color: #fff;
  }
  > .goods-info {
    margin: 30px 0 42px;
  }
}
// 面包屑导航
.breadcrumb-nav {
  font-size: 14px;
  color: #666666;
  line-height: 24px;
  padding: 24px 0 32px 0;
}

.el-tabs--border-card {
  border: unset;
  box-shadow: unset;
}
</style>